import React from 'react';
// import { InfoCircleOutlined} from '@ant-design/icons';
import { Button, Card, Form, Modal } from 'antd';
import { connect, FormattedMessage } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { useIntl } from '@/.umi/plugin-locale/localeExports';
import ProForm, { ProFormUploadDragger, ProFormText } from '@ant-design/pro-form';
// import { getCategoryList } from '@/services/verify/verify';

const FormItem = Form.Item;

const Verify = (props) => {
  const { dispatch, submitting, currentUser, isModalVisible } = props;
  const intl = useIntl();

  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };

  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = (values) => {
    const formData = new FormData();
    formData.append('length', values.file.length);
    for (let i = 0; i < values.file.length; i += 1) {
      formData.append(`file${i}`, values.file[i].originFileObj);
    }
    formData.append('hashValue', values.hasValue);
    formData.append('userID', currentUser.id);
    dispatch({
      type: 'verify/submit',
      payload: formData,
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const onValuesChange = (changedValues) => {
    console.log('Failed:', changedValues);
  };

  const handleOk = () => {
    dispatch({
      type: 'verify/hideModal',
      payload: false,
    });
    window.location.href = '/verify';
  };

  return (
    <>
      <PageContainer>
        <Card bordered={false}>
          <ProForm
            {...formItemLayout}
            layout="horizontal"
            initialValues={{}}
            submitter={{
              render: () => {
                return (
                  <FormItem
                    {...submitFormLayout}
                    style={{
                      marginTop: 32,
                    }}
                  >
                    <Button type="primary" htmlType="submit" loading={submitting}>
                      <FormattedMessage id="pages.work.upload.form.submit" />
                    </Button>
                  </FormItem>
                );
              },
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            onValuesChange={onValuesChange}
          >
            <ProFormText
              name="hasValue"
              label={<FormattedMessage id="pages.work.upload.hashValue.label" />}
              placeholder={intl.formatMessage({ id: 'pages.work.upload.hashValue.placeholder' })}
              rules={[
                {
                  required: true,
                  message: intl.formatMessage({ id: 'pages.work.upload.hashValue.required' }),
                },
              ]}
            />
            <ProFormUploadDragger
              name="file"
              label={<FormattedMessage id="pages.work.upload.dragger.label" />}
              title={<FormattedMessage id="pages.work.upload.dragger.title" />}
              description={<FormattedMessage id="pages.work.upload.dragger.description" />}
              rules={[
                {
                  required: true,
                  message: intl.formatMessage({ id: 'pages.work.upload.dragger.required' }),
                },
              ]}
              fieldProps={{}}
            />
          </ProForm>
        </Card>
      </PageContainer>

      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        closable={false}
        footer={
          <Button type="primary" onClick={handleOk}>
            关闭
          </Button>
        }
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

export default connect(({ user, loading, verify }) => ({
  currentUser: user.currentUser,
  submitting: loading.effects['upload/submit'],
  isModalVisible: verify.isModalVisible,
}))(Verify);
